<template>
	<view class="bg-white p-4" style="height: 80vh;width: 2000rpx;">
		<!-- 查询区 -->
		<view class="w-100 flex pt-4 flex-column justify-center"
			style="border: 6rpx dashed #eee; background-color: rgb(249,249,249);">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<view class="flex flex-column align-center">
					<view class="flex align-center justify-between" style="width: 90%;">
						<uni-forms-item :label-width="100" label="框架合同号:" required name="name">
							<uni-easyinput v-model="valiFormData.name" placeholder="请输入框架合同号" />
						</uni-forms-item>
						<uni-forms-item label="订单号:" required name="age">
							<uni-easyinput v-model="valiFormData.age" placeholder="请输入订单号" />
						</uni-forms-item>
						<uni-forms-item label="类型:" name="introduction">
							<view class="w-100">
								<uni-data-select placeholder="请选择要搜索的类型" v-model="valiFormData.Selectvalue"
									:localdata="range" @change="change"></uni-data-select>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<button style="height: 80rpx;line-height: 80rpx;" class="text-white bg-orange">查询</button>
						</uni-forms-item>
					</view>
					<view class="flex align-center justify-between" style="width: 90%;">
						<uni-forms-item :label-width="100" label="起始时间:" required name="name">
							<view class="" style="width: 340rpx;">
								<uni-datetime-picker type="datetime" :clear-icon="false" v-model="valiFormData.single"
									@maskClick="maskClick" />
							</view>
						</uni-forms-item>
						<uni-forms-item style="white-space: nowrap;" label="结束时间:" required name="age">
							<view class="ml-2" style="width: 340rpx;">
								<uni-datetime-picker type="datetime" :clear-icon="false" v-model="valiFormData.single"
									@maskClick="maskClick" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="状态:" name="introduction">
							<view class="w-100">
								<uni-data-select placeholder="请选择要搜索的状态" v-model="valiFormData.Selectvalue"
									:localdata="range1" @change="change"></uni-data-select>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<button style="height: 80rpx;line-height: 80rpx;" class="text-white bg-orange">重置</button>
						</uni-forms-item>
					</view>
				</view>
			</uni-forms>
		</view>
		<!-- 付款键位 -->
		<view class="flex my-2 w-100">
			<view style="height: 60rpx;line-height: 60rpx;width: 200rpx; border-radius: 10rpx; text-align: center;"
				class="text-white font-sm bg-orange hover">付款</view>
		</view>
		<!-- 表单 -->
		<view class="mt-2 flex flex-column">
			<view class="w-100 flex font-sm font-weight-bold" style="background-color: rgb(245,245,245);height: 100rpx;">
				<view class="text-center" style="width: 4%;line-height: 100rpx;">
					<label>
						<checkbox color="#fc7c08" value="cb" />
					</label>
				</view>
				<view class="text-center" style="width: 12%;line-height: 100rpx;">
					<text>框架合同号</text>
				</view>
				<view class=" text-center" style="width: 12%;line-height: 100rpx;">
					<text>订单编号</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>签订时间</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>合同数量(吨)</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>类型</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>年份</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>月份</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>费用(元)</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>已付(元)</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>付款记录</text>
				</view>
				<view class=" text-center" style="width: 8%;line-height: 100rpx;">
					<text>操作</text>
				</view>
			</view>
			<view v-if="false" style="height: 200rpx;" class="w-100 flex justify-center align-center">
				暂无数据
			</view>
			<view v-else class="flex font-sm" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);"
				v-for="(item,index) in 4" :key="index">
				<view class=" flex justify-center align-center" style="width: 4%;line-height: 70rpx;">
					<label>
						<checkbox color="#fc7c08" value="cb" />
					</label>
				</view>
				<view class="flex align-center justify-center" style="width: 12%;line-height: 70rpx;">
					<view class="flex justify-center">
						<text class="text-orange">13546541516</text>
					</view>
				</view>
				<view class="flex align-center justify-center" style="width: 12%;line-height: 70rpx;">
					<view class="flex justify-center">
						<text>1002544324</text>
					</view>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<text>10:00</text>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<text class="text-orange">100</text>
					<text>/吨</text>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<text>竞价交易</text>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<text>2018年</text>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<text>08月</text>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<text>￥1000</text>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<text class="text-orange">￥500</text>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<text class="text-orange">已完成</text>
				</view>
				<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
					<button class="font-sm bg-success text-white flex justify-center align-center"
						style="white-space: nowrap; width: 80rpx;height: 80rpx;">查看</button>
					<button class="font-sm bg-danger text-white flex justify-center align-center"
						style="white-space: nowrap;width: 80rpx;height: 80rpx;">删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ConsignmentMonthlyClosingFee",
		data() {
			return {
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
					Selectvalue: '',
					single: ''
				},
				range: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "操作服务费"
					},
					{
						value: 2,
						text: "平台服务费"
					},
				],
				range1: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "待付款"
					},
					{
						value: 2,
						text: "已付款"
					},
				],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},
			};
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			maskClick(e) {
				console.log("e:", e);
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.hover:hover {
		cursor: pointer;
		text-decoration: underline;
	}
</style>